<template>
  <!-- 用户详情 -->
  <div>
    <div style="display: flex; justify-content: space-between; align-items: center; padding: 20px;;
">
      <div style="flex: 1;">
        <el-descriptions title="基础信息">
          <el-descriptions-item label="昵称">
            张三
          </el-descriptions-item>
          <el-descriptions-item label="账户ID">
            123456
          </el-descriptions-item>
          <el-descriptions-item label="社交平台">
            微信
          </el-descriptions-item>
          <el-descriptions-item label="发文数量">
            285
          </el-descriptions-item>
          <el-descriptions-item label="关注数">
            28
          </el-descriptions-item>
          <el-descriptions-item label="粉丝数">
            298
          </el-descriptions-item>
          <el-descriptions-item label="家庭地址">
            郑州市金水区金水路123号
          </el-descriptions-item><el-descriptions-item label="工作地址">
            郑州市高新区科学大道100号
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div>
        <el-button type="primary">重新生成</el-button>
      </div>
    </div>
    <!-- 下半部分 -->
    <div class="dwxx">定位信息</div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="定位结果" name="first">
        <img :src="require('@/assets/xd/用户定位1.png')"> alt="">
      </el-tab-pane>
      <el-tab-pane label="社交内容" name="second">
        <div class="container">
          <div class="table-container">
            <el-table class="contentTable" :data="tableData" :span-method="objectSpanMethod" border>
              <el-table-column prop="algorithmName" label="定位算法" width="180">
              </el-table-column>
              <el-table-column prop="result" label="定位结果">
              </el-table-column>
            </el-table>
          </div>
          <div class="image-container">
            <img :src="require('@/assets/xd/用户定位2.png' )">
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="社交关系" name="third">
        <img :src="require('@/assets/xd/用户定位4.png')"> alt="">
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      tableData: [{
        algorithmName: '文本定位',
        result: '郑州市 68%',
      },
      {
        algorithmName: '文本定位',
        result: '洛阳市 45%',
      },
      {
        algorithmName: '文本定位',
        result: '南阳市 39%',
      },
      {
        algorithmName: '文本定位',
        result: '天津市 15%',
      },
      {
        algorithmName: '图形定位',
        result: 'xx经纬度 68%',
      }, {
        algorithmName: '图形定位',
        result: 'xx经纬度 45%',
      },
      {
        algorithmName: '图形定位',
        result: 'xx经纬度 39%',
      },
      {
        algorithmName: '图形定位',
        result: 'xx经纬度 15%',
      },
      {
        algorithmName: '融合发布文本、图像、视频、和社交关系的位置泄露预警',
        result: '郑州市 xx经纬度 68%',
      },
      {
        algorithmName: '融合发布文本、图像、视频、和社交关系的位置泄露预警',
        result: '南阳市 xx经纬度 68%',
      },
      {
        algorithmName: '融合发布文本、图像、视频、和社交关系的位置泄露预警',
        result: '天津市 xx经纬度 68%',
      },
      {
        algorithmName: '融合发布文本、图像、视频、和社交关系的位置泄露预警',
        result: '西安市 xx经纬度 68%',
      },
      ]
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelectionChange() { },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 4 === 0) {
          return {
            rowspan: 4,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  },
};
</script>
<style scoped>
.title1 {
  display: inline-block;
  padding: 20px;
}
.button {
  text-align: right;
}
/deep/.el-descriptions__title {
  font-weight: bold;
  font-size: 20px;
}
/deep/.el-descriptions {
  /* font-weight: bold; */
  font-size: 20px;
}
.dwxx {
  margin-left: 30px;
  font-size: 20px;
  font-weight: bold;
  color: #0c0c0c;
}
.el-tabs {
  margin-left: 25px;
}
/deep/.el-tabs__item {
  font-size: large;
}
.el-button {
position: absolute;
top: 20px;
right: 40px;
}
.teble1{
text-align: center;
}
.container {
  display: flex;
}

.table-container {
  flex: 0.5;
  padding-right: 20px;
    width: 30%;
}
.image-container {
  flex: 2;
}
</style>